<template>
    <div class="z"><div>
        <div v-for="(item,index) in goods" class="item" :class="{active: index==$store.state.clickGoodsMenu}" :id="index" @click="clickGoodsMenu(index)">
            <icon :type="item.type" class="icon"></icon>
            {{item.name}}
        </div>
    </div></div>
</template>

<script>
    import Icon from '../icon/icon'
    export default {
        name: "goodsMenu",
        props:{
            goods:Array
        },
        components:{
            Icon,
        },
        methods:{
            clickGoodsMenu(index){
                this.$store.dispatch('clickGoodsMenu',index);   //记录点中的菜单按钮
                setTimeout(()=>{                                //页面跳转后，右侧滚动高度清零
                    this.$store.dispatch('scrollGoodsItem', 0)
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '~@styles/variables.styl'
    .active
        color:red
        background-color:white
        /*font-weight:bold*/
    .z
        width:$fontSize*6
        padding:0 $padding*0.5
    .item
        height:$fontSize*3
        line-height:$fontSize*1.2
        display:flex
        align-items:center
        border-top:1px solid $borderColor
        padding-right:$padding*0.2
        &:first-child
            border-width:0
        .icon
            width:$fontSize*1.5
            margin-left: $padding*0
            margin-right: $padding*0.2
</style>